<!DOCTYPE html>
<html lang="en">

<head>
    <title>后台管理</title>
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css">
    <script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
    <style type="text/css">
        .header {
            width: 100%;
            height: 50px;
            line-height: 50PX;
            background-color: #2e6da2;
            color: white;
        }
        
        .title {
            margin-left: 20px;
            font-size: 18px;
        }
        
        .user {
            float: right;
            margin-right: 20px;
        }
        
        .user a {
            color: white;
        }
        
        .menu {
            width: 200px;
            background: #333744;
            position: absolute;
        }
        /* 主操作页面iframe的位置：绝对位置 left：200px高度在mainresetMainHeight已经设置*/
        
        .main {
            position: absolute;
            left: 200px;
            right: 0px;
        }
        
        .layui-collapse {
            border: none;
        }
        
        .layui-colla-item {
            border-top: none;
        }
        
        .layui-colla-title {
            background: #42485b;
            color: #ffffff;
        }
        
        .layui-colla-content {
            border-top: none;
            padding: 0px;
        }
    </style>

</head>

<body>
    <!-- header -->
    <div class="header">
        <span class="title">{$site.values}-后台管理系统</span>
        <span class="user">{$admin.username}【{$role.title}】<button class="layui-btn layui-btn-sm layui-btn-normal" onclick="logout()">注销</button></span>
        
    </div>



    <!-- 菜单 -->
    <div class="menu" id="menu">
        <div class="layui-collapse">
            {volist name="menus" id="vo"}
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">{$vo.title}</h2>
                <div class="layui-colla-content ">
                    {if isset($vo['children'])&&$vo['children']}
                    <ul class="layui-nav layui-nav-tree" lay-filter="test">
                        {volist name="vo.children" id="cvo"}
                        <li class="layui-nav-item"><a  onclick="menuFire(this)" src="/admins.php/admins/{$cvo.controller}/{$cvo.method}">{$cvo.title}</a></li>
                        {/volist}
                    </ul>
                    {/if}
                </div>
            </div>
            {/volist}
           
        </div>

    </div>


    <!-- 主操作页面 -->
    <div class="main">
        <iframe src="/admins.php/admins/Home/welcome" onload="resetMainHeight(this)" style="width: 100%;height: 100%;" frameborder="0" ></iframe>
    </div>

    <script type="text/javascript">
        //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
        layui.use(['element','layer'], function() {
            var element = layui.element;
            layer=layui.layer;
            $ = layui.jquery;
            resertMenuHeight();

        });

        //设置menu的高度
        function resertMenuHeight() {
            var height = document.documentElement.clientHeight - 50;
            $('#menu').height(height);
        }

        // 重新设置主操作页面高度，left位置在css设置了 直接在height: 745px;也可以
        function resetMainHeight(obj) {
            var height = parent.document.documentElement.clientHeight - 50;
            $(obj).parent('div').height(height);
        }

        //菜单点击
        function menuFire(obj) {
            //获取url
            var src = $(obj).attr('src');
            //设置iframe的src
            $('iframe').attr('src', src);

        }

        //退出登录
        function logout(){
            layer.confirm('确定退出登录吗？', {
              btn: ['确定','取消'] 
            }, function(){
                $.post('/admins.php/admins/Account/logout',function(res){
                    if(res.code>0){
                        layer.alert('注销失败',{icon:2});
                   }else{
                    layer.msg("注销成功",{'icon':1});
                    setTimeout(function(){window.location.reload();},1000);
                   }

                });
              
            },function(){
                setTimeout(function(){
                    window.location.reload();
                },1000);

            },'json');


        }
    </script>








</body>

</html>